<div class="container-fluid layout">
  <div class="title">活动管理</div>
  <div class="layout-container">
    <div class="layout-title">
      <button class="btn btn-success" (click)="addActivity()">新建营销活动</button>
      <button class="btn btn-default" (click)="publish()">发布活动</button>
      <button class="btn btn-default" (click)="stopActivity()">暂停活动</button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>选择</th>
          <th>创建时间</th>
          <th>活动类型</th>
          <th>活动名称</th>
          <th>活动描述</th>
          <th>活动时间</th>
          <th>状态</th>
          <th>分享次数</th>
          <th>领取次数</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox"></td>
          <td>2017-07-17</td>
          <td>代金券</td>
          <td>夏季狂欢</td>
          <td>满5000减500</td>
          <td>2017-07-18</td>
          <td>待发布</td>
          <td>10</td>
          <td>无</td>
          <td>
            <a href="javascript:;">修改</a>-
            <a href="javascript:;" routerLink="../data/1">数据</a>-
            <a href="javascript:;" (click)="delActivity(0)">删除</a>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox"></td>
          <td>2017-07-17</td>
          <td>代金券</td>
          <td>夏季狂欢</td>
          <td>满5000减500</td>
          <td>2017-07-18</td>
          <td>进行中</td>
          <td>26</td>
          <td>0</td>
          <td>
            <a href="javascript:;">修改</a>-
            <a href="javascript:;" routerLink="data/1">数据</a>-
            <a href="javascript:;" (click)="delActivity(1)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<!--新建营销工具弹窗-->
<div bsModal #addActivityModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">选择要创建的优惠券类型</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="type-item">
          <div class="type-title">
            <input type="radio" name="vouchers" id="vouchers" (click)="addType = 1;"/>
            <label for="vouchers">代金券</label>
          </div>
          <div class="type-content">
            代金券又名抵用券，例如:50元代金券，无门槛使用；满1000元，抵用100元等
          </div>
        </div>
        <div class="type-item">
          <div class="type-title">
            <input type="radio" name="discount" id="discount" (click)="addType = 2;"/>
            <label for="discount">折扣券</label>
          </div>
          <div class="type-content">
            为用户提供消费折扣，例如：8折券，全场通用；9折券，限床垫产品。
          </div>
        </div>
        <div class="type-item">
          <div class="type-title">
            <input type="radio" name="exchange" id="exchange" (click)="addType = 3;"/>
            <label for="exchange">兑换券</label>
          </div>
          <div class="type-content">
            为用户提供消费送赠品服务，例如：凭券兑换价值388元的XXX礼品一套。
          </div>
        </div>
        <div class="type-item">
          <div class="type-title">
            <input type="radio" name="customize" id="customize" (click)="addType = 4;"/>
            <label for="customize">自定义</label>
          </div>
        </div>
      </div>
      <div class="model-footer text-center">
        <button type="button" class="btn btn-success" (click)="nextStep()">下一步</button>
        <button type="button" class="btn btn-default" (click)="closeModal()">取消</button>
      </div>
    </div>
  </div>
</div>
<!--确认发布弹窗-->
<div bsModal #confirmReleaseModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-style">
        发布以后，活动信息会同步到小程序首页<br>发布以后不能修改活动内容<br>如果要取消活动，请点击“下架”
      </div>
      <div class="model-footer text-center">
        <button type="button" class="btn btn-success">确定发布</button>
        <button type="button" class="btn btn-default btn-success" (click)="closeModal()">取消发布</button>
      </div>
    </div>
  </div>
</div>
<!--暂停活动-->
<div bsModal #confirmStopModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-strong">
        确定暂停吗？
      </div>
      <div class="model-footer text-center">
        <button type="button" class="btn btn-success">确定</button>
        <button type="button" class="btn btn-default btn-success" (click)="closeModal()">取消</button>
      </div>
    </div>
  </div>
</div>
<!--删除进行中的活动-->
<div bsModal #delProcessingModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="text-strong">活动还没有结束</div>
        <div class="text-style">删除以后不能恢复，确定删除吗？</div>
      </div>
      <div class="model-footer text-center">
        <button type="button" class="btn btn-success">确定</button>
        <button type="button" class="btn btn-default btn-success" (click)="closeModal()">取消</button>
      </div>
    </div>
  </div>
</div>
<!--删除已结束或未发布活动-->
<div bsModal #delActivityModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="text-strong">删除以后</div>
        <div class="text-style">该条活动信息无法找回，确定删除吗？</div>
      </div>
      <div class="model-footer text-center">
        <button type="button" class="btn btn-success">确定</button>
        <button type="button" class="btn btn-default btn-success" (click)="closeModal()">取消</button>
      </div>
    </div>
  </div>
</div>
